<template>
  <div class="selectHome">
    <van-nav-bar
      class="nav_bar"
      fixed
      title="选择服务门店"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
    />
    <div class="select">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <van-radio-group v-model="radio" @change="onItemChange">
          <van-radio v-for="item in list" :key="item" :name="item">
            <storeListItem class="select_item"></storeListItem>
          </van-radio>
        </van-radio-group>
      </van-list>
    </div>
  </div>
</template>

<script>
import storeListItem from "./storeListItem.vue";
export default {
  name: "selectStore",
  components: { storeListItem },
  props: {
    storeId: {
      type: Number,
      default: -1,
    },
    // list: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  data() {
    return {
      value1: 0,
      value2: "a",
      radio: this.storeId,
      option1: [
        { text: "综合排序", value: 0 },
        { text: "评分最高", value: 1 },
        { text: "距离最近", value: 2 },
      ],
      option2: [
        { text: "服务筛选", value: "a" },
        { text: "保养", value: "b" },
        { text: "洗车", value: "c" },
        { text: "换胎", value: "d" },
        { text: "美容", value: "e" },
      ],
      list: [],
      loading: false,
      finished: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    onClickLeft() {
      this.$emit("back");
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onItemChange(e) {
      this.$emit("input", e);
      this.$emit("select");
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.selectHome {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  //   background-attachment: fixed;
  background-position: top center;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;
  position: relative;
  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
      no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: top;
    /deep/ .van-nav-bar__title {
      color: #fff;
      font-weight: bold;
    }
    /deep/.van-nav-bar__text {
      color: #fff;
      margin-left: 20px;
      font-size: 52px;
    }
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #fff;
    }
  }
  /deep/ .van-hairline--bottom::after {
    border: unset;
  }

  .select {
    margin: 60px 0;
    /deep/ .van-dropdown-menu__bar {
      background: rgba(255, 255, 255, 0.3);
      .van-dropdown-menu__title {
        color: #fff;
      }
    }
    /deep/ .van-popup--top {
      width: 92%;
      left: 50px;
      right: 50px;
    }
  }
  .list {
    /deep/ .van-radio {
      background: #fff;
      margin-bottom: 20px;
      padding-left: 15px;
      border-radius: 30px;
      .select_item {
        padding: 40px 0 0 0;
      }
    }
  }
}
</style>
